<template>
  <div class="order-page">
    <div class="header">
      <div class="nav">
        <router-link to="/main/order" class="active">全部订单</router-link>
        <router-link to="/order">未完成</router-link>
        <router-link to="/completed">已完成</router-link>
      </div>
    </div>
    <h1>我的订单</h1>
    <div class="order-list">
      <div class="order-item" v-for="order in orders" :key="order.id">
        <div class="order-header">
          <span>订单号: {{ order.id }}</span>
          <span v-if="order.completed">已完成</span>
          <span v-else>未完成</span>
        </div>
        <div class="order-content">
          <div class="order-image" :style="{ backgroundColor: order.imageColor }">
            <img class="order-image" :src="order.appliance.image" alt="图像"/>
          </div>
          <div class="order-details">
            <p>维修家电: {{ order.applianceName }}</p>
            <p>问题描述: {{ order.description }}</p>
            <p>维修师傅: {{ order.technicianName }}</p>
            <p>发起时间: {{ order.submissionDate }}</p>
            <p>维修金额: {{ order.amount }}</p>
            <p v-if="order.isCompleted">完成时间: {{ order.completedTime }}</p>
          </div>
        </div>
        <div class="order-actions">
          <button v-if="!order.completed" @click="cancelOrder(order.id)">取消订单</button>
          <button v-if="order.completed" @click="rateOrder(order.id)">评价</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import { findAll } from '../api/Customer.js';

const orders = ref();
onMounted(() => {
  searchDatas();
});
async function searchDatas(){
  let customers=await findAll();
  orders.value=customers.repairRequest;
}

function cancelOrder(orderId) {
  console.log(`取消订单: ${orderId}`);
  // 这里可以添加取消订单的逻辑
}

function rateOrder(orderId) {
  console.log(`评价订单: ${orderId}`);
  // 这里可以添加评价订单的逻辑
}
</script>

<!--<style scoped>-->
<!--.order-page {-->
<!--  padding: 20px;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  flex-wrap: wrap;-->
<!--  gap: 10px;-->
<!--}-->
<!--.header {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  margin-bottom: 20px;-->
<!--  background-color: #f4f4f4; /* 根据需要调整背景颜色 */-->
<!--  padding: 10px; /* 根据需要调整内边距 */-->
<!--}-->
<!--.nav {-->
<!--  display: flex;-->
<!--  justify-content: space-around; /* 使链接平均分布在容器中 */-->
<!--}-->
<!--.nav a {-->
<!--  text-decoration: none; /* 去除下划线 */-->
<!--  color: black; /* 默认字体颜色 */-->
<!--  padding: 10px; /* 根据需要调整内边距 */-->
<!--}-->
<!--.nav a.active {-->
<!--  color: green; /* 激活状态的字体颜色 */-->
<!--  border-bottom: 2px solid green; /* 激活状态的下划线 */-->
<!--}-->
<!--.order-list {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  gap: 20px;-->

<!--}-->

<!--.order-item {-->
<!--  border: 2px solid #ccc;-->
<!--  border-radius: 8px;-->
<!--  padding: 20px;-->
<!--  flex-grow: 1;-->
<!--  background-color: white;-->
<!--}-->

<!--.order-header {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  margin-bottom: 10px;-->
<!--}-->

<!--.order-content {-->
<!--  display: flex;-->
<!--  gap: 10px;-->
<!--}-->

<!--.order-image {-->
<!--  height: 60%;-->
<!--  border-radius: 4px;-->
<!--  order: 1;-->
<!--  margin-right: 10px; /* 调整间距 */-->
<!--}-->

<!--.order-details {-->
<!--  flex: 1;-->
<!--}-->

<!--.order-actions {-->
<!--  display: flex;-->
<!--  justify-content: flex-end;-->
<!--  margin-top: 10px;-->
<!--}-->

<!--button {-->
<!--  padding: 5px 10px;-->
<!--  background-color: #42b983;-->
<!--  color: white;-->
<!--  border: none;-->
<!--  border-radius: 4px;-->
<!--  cursor: pointer;-->
<!--  margin-left: 10px;-->
<!--  transition: background-color 0.3s; /* 平滑过渡效果 */-->
<!--}-->
<!--</style>-->

<style scoped>
.order-page {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background-color: #f4f4f4; /* 调整背景颜色 */
  padding: 10px; /* 调整内边距 */
}

.nav {
  display: flex;
  justify-content: space-around; /* 使链接平均分布在容器中 */
}

.nav a {
  text-decoration: none; /* 去除下划线 */
  color: #333; /* 默认字体颜色 */
  padding: 10px 15px; /* 调整内边距 */
  border-bottom: 2px solid transparent; /* 默认无下划线 */
  transition: border-color 0.3s; /* 平滑过渡效果 */
}

.nav a.active,
.nav a:hover {
  color: #42b983; /* 激活状态和鼠标悬停时的字体颜色 */
  border-bottom-color: #42b983; /* 激活状态和鼠标悬停时的下划线颜色 */
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: bold; /* 加粗字体 */
}

.order-content {
  display: flex;
  gap: 10px;
}

.order-image {
  height: 100%;
  width: 50%;
  border-radius: 4px;
  overflow: hidden; /* 防止图片超出容器 */
  margin-right: 10px;
}

.order-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片的比例 */
}

.order-details {
  flex: 1;
  color: #555; /* 调整字体颜色 */
}

.order-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

button {
  padding: 5px 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
  transition: background-color 0.3s; /* 平滑过渡效果 */
}
</style>
